<template>
    <h2>hook函数</h2>
    <ul>
        <li>横坐标：{{x}}</li>
        <li>纵坐标：{{y}}</li>
    </ul>
    <h2 v-if="loading">正在加载中</h2>
    <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
    <ul v-else>
        <li>{{data.id}}</li>
        <li>{{data.address}}</li>
        <li>{{data.distance}}</li>
    </ul>
    <!--数组-->
    <hr>
    <ul v-for="item in data" :key="item.id">
        <li>{{item.id}}</li>
        <li>{{item.title}}</li>
        <li>{{item.price}}</li>
    </ul>
</template>
<script lang="ts">
import { defineComponent, watch } from 'vue'
import useMousePoint from './hooks/useMousePoint'
import useRequest from './hooks/useRequest'
// 定义接口
interface IAddressData{
    id: number;
    address: string;
    distance: string;
}
interface IProductsData{
    id:string;
    title:string,
    price:number
}
export default defineComponent({
    name: 'App',
    // 需求1：用户在页面中点击页面，把点击的位置的横纵坐标收集起来并展示
    setup() {
        const { x, y } = useMousePoint()
        // const { loading, data, errorMsg } = useRequest<IAddressData>('/data/address.json')
        const { loading, data, errorMsg } = useRequest<IProductsData[]>('/data/products.json')
        watch(data, () => {
            if (data.value) {
                console.log(data.value.length)
            }
        })
        return {
            x,
            y,
            loading, data, errorMsg
        }
    },
})
</script>
<style>
</style>